<template>
	<div class="content" v-loading="loading" v-if="goodsInfo">
		<h2>
			<i class="iconfont icon-shangpin"></i>
			<a @click="goBack" style="color: #f50">返回上一页&nbsp;/&nbsp;</a>
			<span>商品详情</span>
		</h2>
		<div class="content-bg">
			<div class="info-list base-info">
				<!--商品基本类型-->
				<h2>基本信息</h2>
				<div class="list">
					<strong>描述:</strong>
					<span>{{goodsInfo.commodity_name}}</span>
				</div>
				<div class="list">
					<strong>品牌名:&nbsp;&nbsp;</strong>
					<span>{{goodsInfo.brand.brand_name}}</span>
				</div>
				<div class="list">
					<strong>商品分类:&nbsp;&nbsp;</strong>
					<span v-if="goodsInfo.categories">{{goodsInfo.categories[0].cate_name}}</span>
				</div>
				<div class="list">
					<strong>所属商家:&nbsp;&nbsp;</strong>
					<span>{{goodsInfo.company.company_name}}</span>
				</div>
				<div class="list"  v-if="goodsInfo.onshief_time">
					<strong>上架时间:&nbsp;&nbsp;</strong>
					<span>{{ goodsInfo.onshief_time | formatTime }}</span>
				</div>
				<div class="list">
					<strong>赠送点分:&nbsp;&nbsp;</strong>
					<span>{{ goodsInfo.price.give_fen }}</span>
				</div>
				<div class="list">
					<strong>库存:&nbsp;&nbsp;</strong>
					<span>{{goodsInfo.stocks}}</span>
				</div>
			</div>
			<!--价格参数-->
 			<div class="info-list">
				<h2>价格参数</h2>
				<div class="list">
					<strong>吊牌价格:</strong>
					<span>{{goodsInfo.price.price}}</span>
				</div>
				<div class="list">
					<strong>卖价:&nbsp;&nbsp;</strong>
					<span>{{goodsInfo.price.sale_price}}</span>
				</div>
				<div class="list">
					<strong>点币价:&nbsp;&nbsp;</strong>
					<span>{{goodsInfo.price.bi_price}}</span>
				</div>
			</div>			
			<!--商品规格-->
 			<div class="info-list">
				<h2>商品规格(SKU)</h2>
				<div class="list" v-for="item in goodsInfo.props">
					<strong>{{item.prop_name}}:&nbsp;&nbsp;</strong>
					<span>{{item.prop_value}}</span>
				</div>
			</div>
			<!--商品图片-->
			<div class="info-list info-pic">
				<h2>商品图片</h2>
				<div class="main-pic">
					<h2>主图</h2>
					<img :src="goodsInfo.mainimg.url" alt="" v-if="goodsInfo.mainimg"/>
				</div>
				<div class="addition-pic">
					<h2>商品详情图</h2>
					<img :src="item.url" alt="" v-for="item in goodsInfo.detailimgs"/>
				</div>
			</div>
			<!--商品大图-->
			<div class="info-list info-big-pic">
				<h2>商品大图</h2>
				<!--<img :src="goodsInfo.bigimgs[0].url" alt="" />-->
				<img :src="item.url" alt="" v-for="item in goodsInfo.bigimgs"/>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		created() {
			this.fetchGoodsInfo();//获取商品详情
		},
		data() {
			return {
				loading: true,
				goodsInfo: null 		//商品所有属性	
			}
		},
		methods: {
			goBack() {
				this.$router.back();
			},
			fetchGoodsInfo() {
				var id = this.$route.query.id;
				//请求url
				var url = `${this.url}/commodity/item_get_detail.action`;
				//请求参数
				var params = { commodity_id: id }
				//数据加载小圆圈
				this.loading = true;
				//进行请求
				this.$http.get(url,{ params} ).then((res, err) => {
					if( res.data.success ) {
						this.loading = false;
						this.goodsInfo = res.data.result
					}else {
						this.loading = false;
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 87%;
		transition: width .5s;
		> h2 {
			background: #f9f9f9;
			border-bottom: 1px solid #ccc;
			padding: 10px 0;
			font-weight: normal;
			text-indent: 3rem;
			font-size: 1.3rem;
			color: #555;
			i {
				margin-right: 1rem;
			}
		}
	}
	.content-bg {
		background: #f2f2f2;
		padding: 2rem;
	}
	.info-list {
		width: 80%;
		border: 1px solid #aaa;
		padding: 1rem;
		font-size: 14px;
		color: #333;
		margin-bottom: 1rem;
		>h2 {
			font-weight: normal;
			display: flex;
			align-items: center;
			color: #337ab7;
			.more {
				font-size: 13px;
				margin-left: auto;
				color: #4b4;
			}
		}
		.list {
			margin: 1.5rem 0;
			display: inline-block;
			min-width: 30%;
			color: #555;
			strong {
				color: #343434;
				font-weight: 600;
			}
		}
	}
	.base-info {
		.list:first-of-type {
			width: 100%;
		}
	}
	/*商品图片*/
	.info-pic  {
		
		.main-pic {
			h2 {
				font-weight: normal;
				color: #555;
				font-size: 15px;
				margin: 1rem 0;
			}
		}
		.addition-pic {
			h2 {
				margin: 1rem 0;
				font-weight: normal;
				color: #555;
				font-size: 15px;
			}
		}
		img {
			width: 120px;
			height: 100px;		
		}
	}
	
	.fade-enter-active, .fade-leave-active {
		transition: transform .5s;
	}
	.fade-enter  {
		opacity: .1;
		transform: scale(.1);
	}
	.fade-leave-active {
		transform: scale(0);
	}
	.info-big-pic img {
		width: 100%;
	}
	/*.fade-leave-to  {
		opacity: 0;
		transform: scale(0);
	}*/

</style>